<template>
  <div class="datelist">
    <div class="date-container">
      <div class="date-group">
        <div
            v-for="(date, index) in visibleDates"
            :key="index"
            class="date_wd"
            :class="{ active: selectedDate === date.component }"
            @click="selectDate(date.component, index)"
        >
          <text style="font-size:0.9rem">{{ date.weekday }}</text>
          <text style="font-size:1.6rem">{{ date.date }}</text>
        </div>
      </div>
      <img src="../../../assets/date_back_left.png" alt="" @click="moveDate(-1)" class="arrow left" />
      <img src="../../../assets/date_back_right.png" alt="" @click="moveDate(1)" class="arrow right" />
    </div>
  </div>
  <div class="selected-date">
    <DateWed v-if="activeComponent === 'date-wed'" />
    <DateTue v-if="activeComponent === 'date-tue'" />
    <DateFri v-if="activeComponent === 'date-fri'" />
    <DateSat v-if="activeComponent === 'date-sat'" />
    <DateSun v-if="activeComponent === 'date-sun'" />
  </div>
</template>

<script setup>
import { onMounted, ref,computed } from 'vue';
import DateWed from "../../../components/Lifelist/date-wed.vue";
import DateTue from "../../../components/Lifelist/date-tue.vue";
import DateFri from "../../../components/Lifelist/date-fri.vue";
import DateSat from "../../../components/Lifelist/date-sat.vue";
import DateSun from "../../../components/Lifelist/date-sun.vue";
import { useRoute, useRouter } from "vue-router";


const allDates = ref([
  { weekday: 'WED.', date: '11-06', component: 'date-wed' },
  { weekday: 'TUE.', date: '11-07', component: 'date-tue' },
  { weekday: 'FRI.', date: '11-08', component: 'date-fri' },
  { weekday: 'SAT.', date: '11-09', component: 'date-sat' },
  { weekday: 'SUN.', date: '11-10', component: 'date-sun' }
]);
const currentIndex = ref(0);
const selectedDate = ref('');
const activeComponent = ref('date-wed');

const visibleDates = computed(() => {
  let start = Math.max(0, currentIndex.value - 1);
  const end = Math.min(allDates.value.length, start + 3);
  if (end - start < 3) {
    start = Math.max(0, allDates.value.length - 3);
  }
  return allDates.value.slice(start, end);
});

const selectDate = (date, index) => {
  selectedDate.value = date;
  activeComponent.value = allDates.value.find(d => d.component === date).component;
  currentIndex.value = index;
};

const moveDate = (direction) => {
  currentIndex.value += direction;
  currentIndex.value = Math.max(0, Math.min(allDates.value.length - 1, currentIndex.value));
  selectDate(allDates.value[currentIndex.value].component, currentIndex.value);
};

onMounted(() => {
  selectedDate.value = 'date-wed';
  activeComponent.value = 'date-wed';
  currentIndex.value = allDates.value.findIndex(d => d.component === 'date-wed');
});

</script>

<style scoped lang="less">
.datelist {
  margin-top: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55px;
  padding: 12px 16px;
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative; /* 使箭头可以绝对定位 */
}

.date-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

.date-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.date_wd {
  opacity: 0.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &.active {
    color: #020202;
    opacity: 1;
  }
  text {
    margin: 0;
    line-height: 1;
  }
}

.arrow {
  width: 16px;
  height: 16px;
  cursor: pointer;
  position: absolute;
  //top: 50%;
  //transform: translateY(-50%); /* 垂直居中 */
}

.left {
  left: 25%;
}

.right {
  right: 25%;
}

.selected-date {
  padding-bottom: 30px;
  font-weight: 600;
}
</style>

